JSPlots.jl Comprehensive Tutorial

To briefly show the package, this page demonstrates one example of each plot type available in JSPlots.jl. Before showing the charts, we will generate a dataset of synthetic data that represents sales for a particular company of door to door salesmen. rich enough to create meaningful examples for all chart types.

Dataset Generation

We'll create a business analytics dataset containing sales data with multiple dimensions:

Time series: Daily sales over one year
Categories: Products, regions, and customer segments
Continuous variables: Sales amounts, costs, quantities, and customer metrics
Geographic data: Latitude and longitude for where the door to door salesperson made each sale.

The code that generates this dataset will be shown below as an example for the CodeBlock type in JSPlots.jl.

Generated Dataset Preview

The dataset contains 7300 records with 15 variables. Now let's explore this data using all available chart types in JSPlots.jl.

1. Tabular Data and Text

PivotTable

PivotTables can do quite alot. Indeed many of the charttypes of this package would alternatively be doable just using a PivotTable so you might prefer doing that in some cases.

pivot

Interactive pivot table - drag fields to explore different views

Data: sales_data

Table - Data Table

This just displays your DataFrame in a nice way on the html page. There is a download as csv button at the bottom of it. You could also just use a PivotTable but this is lighterweight for cases where a PivotTable is overkill

table

Summary statistics by product category

product	total_sales	total_quantity	total_profit
Phone	7.913104139364734e7	1708271	3.1612257120504472e7
Laptop	5.902997209751325e7	1003416	2.3619806497625954e7
Tablet	3.987675431023084e7	649223	1.583284406174435e7
Monitor	2.9683249661126185e7	1077852	1.1861313709327826e7
Accessories	1.995751227446285e7	347583	7.908429502769463e6

Data: table

CodeBlock - Display Code

We can use a CodeBlock to show code snippets with syntax highlighting. We have correct Syntax highlighting for Julia, Python, R, JavaScript, Java, C, C++, SQL, pl/pgsql, Rust. For anything else it will all be black.

Julia

function generate_comprehensive_data()
    rng = StableRNG(42)

    # Time period: One year of daily data
    start_date = Date(2024, 1, 1)
    dates = start_date:Day(1):(start_date + Day(364))
    n = length(dates)

    # Product categories
    products = ["Laptop", "Tablet", "Phone", "Monitor", "Accessories"]
    regions = ["North", "South", "East", "West"]
    segments = ["Enterprise", "SMB", "Consumer"]

    # Generate sales data
    records = DataFrame[]

    for (i, date) in enumerate(dates)
        for product in products
            for region in regions
                # Base sales with trends and seasonality
                base = 10000 + 1000 * sin(2π * i / 365)
                trend = i * 10

                # Product-specific multipliers
                product_mult = Dict(
                    "Laptop" => 3.0, "Tablet" => 2.0, "Phone" => 4.0,
                    "Monitor" => 1.5, "Accessories" => 1.0
                )[product]

                # Region-specific multipliers
                region_mult = Dict("North" => 1.2, "South" => 1.0, "East" => 1.3, "West" => 1.1)[region]

                sales = (base + trend) * product_mult * region_mult * (1 + 0.2 * randn(rng))
                quantity = round(Int, sales / (100 + 50 * randn(rng)))
                cost = sales * (0.6 + 0.1 * randn(rng))
                profit = sales - cost

                # Customer metrics
                customers = round(Int, quantity * (0.3 + 0.1 * randn(rng)))
                satisfaction = 3.5 + 1.0 * randn(rng)

                # Geographic coordinates
                lat = 35.0 + Dict("North" => 10, "South" => -10, "East" => 0, "West" => 0)[region] + randn(rng)
                lon = -95.0 + Dict("North" => 0, "South" => 0, "East" => 15, "West" => -15)[region] + randn(rng)

                # Random segment assignment
                segment = rand(rng, segments)

                push!(records, DataFrame(
                    date = date,
                    product = product,
                    region = region,
                    segment = segment,
                    sales = max(0, sales),
                    quantity = max(0, quantity),
                    cost = max(0, cost),
                    profit = profit,
                    customers = max(0, customers),
                    satisfaction = clamp(satisfaction, 1, 5),
                    latitude = lat,
                    longitude = lon,
                    month = month(date),
                    quarter = (month(date) - 1) ÷ 3 + 1,
                    day_of_year = dayofyear(date)
                ))
            end
        end
    end

    return vcat(records...)
end

Generates a comprehensive business dataset with 7,300 records spanning multiple dimensions

LinkList - Navigation Links

A LinkList shows you a list of links with optional descriptions. These are automatically generated if you make a Pages struct where there is a LinkList on the top page with links to the others. You can also make your own.

TextBlock - Rich Text and HTML

You can write whatever HTML you want and put it in a TextBlock which will put it in the resultant HTML.

TextBlock allows you to add rich text, HTML, and annotations to your reports.

You can include formatting, styled text, and even inline code.

2. Two-Dimensional Plots

LineChart - Time Series Trends

Line Chart

Time series of daily sales, faceted by product category

Plot Attributes

Aggregator:

Faceting

Facet by:

Data: sales_data

AreaChart - Stacked Trends

Area Chart

Sales Data in an areachart

Filters

segment:

region:

product:

Plot Attributes

X dimension:

Y dimension:

Group by:

Stack mode:

Faceting

Facet 1:

Facet 2:

Data: sales_data

ScatterPlot - Relationship Analysis

Scatter Plot

Scatter plot showing relationship between customers and sales

Plot Attributes

Color/Point type:

Faceting

Facet 1:

Facet 2:

Data: sales_data

Path - Trajectory Visualization

We can use a Paths chart to show the temporal ordering of sales data. This is like a scatter plot but the points are joined in the order they occured.

Path Chart

Path plot on sales data.

Filters

product:

Plot Attributes

X dimension:

Y dimension:

Path grouping:

Faceting

Facet 1:

Facet 2:

Data: sales_data

3. Distributional Plots

DistPlot - Distribution Analysis

This makes a historgram, box and whiskers and rugplot. So you can see differences in distribution for a variable between different groups of observations. Note at the bottom there is a slider for changing the number of bins in the histogram.

Distribution Plot

Multi-view distribution analysis of profit

Filters

Filter by region:

Hold Ctrl/Cmd to select multiple values

Filter by product:

Hold Ctrl/Cmd to select multiple values

Filter by segment:

Hold Ctrl/Cmd to select multiple values

Filter by date: 2024-01-01 to 2024-12-30

Plot Attributes

Select variable: Group by:

Number of bins: 30

Data: sales_data

KernelDensity - Smooth Distribution

This shows kernel density estimates for a variable seperated by groups in the observations. It also has faceting available (unlike DistPlot). There is a slider at the bottom for controlling the bandwidth of the kernel density estimate.

Kernel Density Plot

Distribution of customer satisfaction ratings

Filters

Filter by region:

Hold Ctrl/Cmd to select multiple values

Filter by product:

Hold Ctrl/Cmd to select multiple values

Filter by segment:

Hold Ctrl/Cmd to select multiple values

Filter by date: 2024-01-01 to 2024-12-30

Plot Attributes

Select variable: Group by:

Faceting

Facet 1:

Facet 2:

Bandwidth: auto (0 = auto, max ≈ 5493.4)

Data: sales_data

PieChart - Categorical Proportions

This gives piecharts. Note that piecharts are generally pretty bad (google it to see more on this) but up to you if you like them. There is faceting available, filtering and you can change the grouping variable and the numeric variable being aggregated over to determine pie width.

Pie Chart

share by grouping

Plot Attributes

Slice size:

Slice grouping:

Data: sales_data

4. Three-Dimensional Plots

Scatter3D

This is a 3D scatter plot. You can rotate it and zoom in and out. There are options for showing PCA eigenvectors as well.

3D Scatter Plot

3D scatter with PCA eigenvectors

Filters

cost:

Plot Attributes

Color:

Faceting

Facet 1:

Facet 2:

Data: sales_data

Surface3D - Function Surface

This is a 3D surface plot that allows you to display a few surfaces together. You can rotate it and zoom in and out. This example shows average sales over latitude and longitude.

3D Chart

3D surface of sales by geography

Filters

grouping_category:

Data: surface_df

ScatterSurface3D - Scatter with Fitted Surface

This is a 3D scatter plot with a fitted surface for each group of points. You can train the surface with differing bandwidth parameters and with the L1 or L2 norm (L2 is default). You can rotate it and zoom in and out.

3D Scatter with Surfaces

3D scatter with L2-fitted surface

Groups (click to toggle visibility)

Surface Controls

Smoothing Parameter: Defaults

Data: df

5. Plots from Other Julia Packages

Picture and Slides allow you to embed plots from Plots.jl, Makie.jl, and VegaLite.jl. See the Picture examples and Slides examples for demonstrations.

Next Steps

This tutorial showed one example of each chart type in JSPlots.jl. To learn more:

Click on chart type names in the documentation to see detailed examples
Explore the examples/ folder for source code
Check the API documentation

This page was created using JSPlots.jl.